
<div style="margin: 10px 10px 10px 10px">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="s_time" type="text" name="s_time" lay-verify="required"  placeholder="开始时间" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                  <input id="e_time" type="text" name="e_time" lay-verify="required"  placeholder="结束时间" autocomplete="off" class="layui-input">
                </div>
              </div>
            <div class="layui-inline" >
              <div class="layui-input-inline" style="width: 300px">
                <select name="chose_device" id="chose_device" xm-select="select" xm-select-type="1"  xm-select-search="" xm-select-height="36px" >
                </select>
              </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn" lay-submit="" lay-filter="data-search-btn">查询</a>
            </div>
        </div>
    </form>
</div>
<!-- 报警数据表格开始 -->
<table class="layui-table" id="alarm_report_table" lay-filter="alarm_report_table"></table>
<script type="text/html" id="alarm_report_bar">
    <a class="layui-btn layui-btn-xs " lay-event="show_alarm_detail">图表展示</a>
</script>
<!-- 报警数据表格结束 -->
<!-- e_chart部分开始 -->
<div class="layui-coutainer" style="display:none" id="echarts_div">
 <div class="layui-row" >
  <!-- 雷达图开始 -->
  <div class="layui-col-lg6">
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!-- <div class="layui-card-header">健康数据雷达图</div> -->
          <div class="layui-card-body" style="text-align: center;">
             <div  id="radar_chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  <div class="layui-col-lg6" >
    <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
      <div class="layui-col-md12">
        <div class="layui-card" >
          <!-- <div class="layui-card-header">人员基本信息</div> -->
          <div class="layui-card-body" style="">
             <div  id="echarts_3"></div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- 曲线图 -->
  <div class="layui-row ">
    <div class="layui-col-md12" >
      <div class="layui-card">
        <!-- <div class="layui-card-header">健康数据详情</div> -->
        <div class="layui-card-body">
          <table id="alarm_report_detail_table" ></table>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<!-- e_chart部分结束 -->
<!-- js代码开始 -->
<!-- 引用echart插件 -->
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
// $('.layui-body').attr('style','padding:10px;bottom:0px;left:0px') 
// $('.layui-side').hide()
form.render()
// table.render()
// 图标的宽度和高度的适应屏幕处理
var radar_chart_width=get_width/3
var radar_chart_height=get_height/2.2
$('#radar_chart').attr('style','height:'+radar_chart_height+'px;width:auto')
$('#echarts_3').attr('style','height:'+radar_chart_height+'px;width:auto')
$('#person_base_info').attr('style','height:'+radar_chart_height+'px;width:'+radar_chart_width+'px;')
var report_data_detail_height=get_height-radar_chart_height-100
var report_data_detail_width=get_width/1.1
// $('#alarm_report_detail_table').attr('style','height:'+report_data_detail_height+'px;width:auto;')

var ajax_url='alarm_report'
// 设备数据表格渲染函数
var alarm_report_table=function(table_data){
  table.render({
    elem: '#alarm_report_table',
    data: table_data,
    toolbar: true,
    title:'报警数据',
    id:'alarm_report_table',
    cols: [
    [   {
        field: 'user_name', 
        title: '名称',
        sort:true,
        templet:function(row){
          var device_name=get_detail_from_id(device,row.device_id);
          var user_name=device_name.user_name
          return user_name
        }}
      , {
        field: 'device_id', 
        title: '设备ID',
        sort:true
        }
      , {
        field: 'efence',
        title: '围栏报警',
        templet:function(ala){
          //console.log(ala)
          var alarm_kind=ala.alarm_kind
          var circle=alarm_kind.circle
          if(!circle){
            circle=0
          }
          var rectangle=alarm_kind.rectangle
          if(!rectangle){
            rectangle=0
          }
          var polygon=alarm_kind.polygon
          if(!polygon){
            polygon=0
          }
          var efe_num=circle+rectangle+polygon
          return '<p>'+efe_num.toString()+'次</p>'
        }
    }, 
    {
        field: 'polyline',
        title: '路线偏移',
        templet:function(row){
          var v=row.alarm_kind.polyline
          if(!v){
            v=0
          }
          return '<p>'+v.toString()+'次</p>'
        }
    }, 
      {
        field: 'stop_alarm',
        title: '停留超时',
        templet:function(row){
          var v=row.alarm_kind.stop_alarm
          if(!v){
            v=0
          }
          return '<p>'+v.toString()+'次</p>'
        } 
    },  
    {
        field: 'speed_alarm',
        title: '超速报警',
        templet:function(row){
          var v=row.alarm_kind.speed_alarm
          if(!v){
            v=0
          }
          return '<p>'+v.toString()+'次</p>'
        } 
    },  
    {
        field: 'sos_alarm',
        title: '断电报警',
        templet:function(row){
          var v=row.alarm_kind.power_cut
          if(!v){
            v=0
          }
          return '<p>'+v.toString()+'次</p>'
        }
    },
        {title: '操作',templet: '#alarm_report_bar', fixed: "right", align: "center"}
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}



// 首次健康数据加载

get_info_ajax(ajax_url,'get_init_data',alarm_report_table)

// 健康数据查询的ajax
var get_report_data_detail='0';
// var post_info_ajax=function(query_param,query_detail){

//   query_param=JSON.stringify(query_param)
//   //console.log(query_param)
//    $.ajax({
//           type: 'POST',
//           url:"/alarm_report/?what="+'query_alarm_report',
//           dataType: 'json',
//           async:true,
//           data:{query_param},
//           success: function( data) {
//           //console.log(data)
//           alarm_report_table(data)
//         },
//         error:function (edata) {
//               //console.log(edata)
//           }
//       }); 

// }

// 监听设备搜索操作
form.on('submit(data-search-btn)', function (data) {
  var search_key = data.field;
  var s_time=search_key['s_time'];
  var e_time=search_key['e_time'];
  //console.log(formSelects.value('select', 'val'))
  query_param={'hard_id':formSelects.value('select', 'val'),'s_time':s_time,'e_time':e_time,'query_detail':'no'}
  post_info_ajax(query_param,ajax_url,'query_report',alarm_report_table)
  return false;
});
// 监听图表展示按钮
table.on('tool(alarm_report_table)',function(obj){
  //console.log(obj)
  layer.open({
        type: 1
        ,title:'健康数据展示:'
        ,area:['100%','100%'] 
        ,offset:'60px'
        ,id: 'health_reports_chart' //防止重复弹出
        ,content:$('#echarts_div')
        ,zIndex:999
        ,success:function(layero){
          show_chart(obj.data)
          echarts_3(obj.data.alarm_time)

        }
        ,shade: 0 //不显示遮罩

        
      });
})
// 图标展示功能函数

var show_chart=function(ala){

  var alarm_kind=ala.alarm_kind
  var circle=alarm_kind.circle
  if(!circle){
    circle=0
  }
  var rectangle=alarm_kind.rectangle
  if(!rectangle){
    rectangle=0
  }
  var polygon=alarm_kind.polygon
  if(!polygon){
    polygon=0
  }
  var efe_num=circle+rectangle+polygon
  // 基于准备好的dom，初始化echarts实例
  var radar_chart = echarts.init(document.getElementById('radar_chart'));

  // 指定图表的配置项和数据
  var option = {
    // title: {
    // text: '某站点用户访问来源',
    // subtext: '纯属虚构',
    // left: 'center'
    // },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['断电报警','围栏报警','停留报警','超速报警','路线偏移报警']
    },
    series: [
        {
            name: '报警占比',
            type: 'pie',
            radius: '65%',
            center: ['60%', '50%'],

            data: [
                {value: alarm_kind.power_cut, name: '断电报警',attch:'power_cut'},
                {value: efe_num, name: '围栏报警',attch:'efence'},
                {value: alarm_kind.stop_alarm, name: '停留报警',attch:'stop_alarm'},
                {value: alarm_kind.speed_alarm, name: '超速报警',attch:'speed_alarm'},
                {value: alarm_kind.polyline, name: '路线偏移报警',attch:'polyline'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }
  radar_chart.setOption(option);
  alarm_table_show(ala['alarm_detail'])
  radar_chart.on('click',function(param){
    //console.log(param)
    var chose_alarm=param.data.attch
    var alarm_report_detail=[];
    ala['alarm_detail'].forEach(item=>{
      
      if(chose_alarm=='efence'){
        if(['circle','polygon','rectangle'].indexOf(item.kind)!=-1){
          alarm_report_detail.push(item)
        }
      }else{
        if(item.kind==chose_alarm){
          alarm_report_detail.push(item)
        }
      }
    })
    //console.log(alarm_report_detail)
    alarm_table_show(alarm_report_detail)
  })
}

var alarm_table_show=function(data){
      table.render({
        elem: '#alarm_report_detail_table',
        data: data,
        id:'alarm_report_detail_table',
        skin:'nob',
        size:'sm',
        height: report_data_detail_height-70,
        cols: [[
          {type: "checkbox", fixed: "left"},
          {field: 'index_num',width:40, title: '序号',templet:function(d){
            return d.LAY_INDEX
          }},
          {field: 'name', title: '设备名称',width:100,templet:function(d){
            var dev_name=get_detail_from_id(device,d.device_id)
            if(dev_name.user_detail!='0'){
              dev_name=dev_name.user_detail.name
            }else{
              dev_name=dev_name.user_name
            }
            return dev_name
          }},
          {field: 'device_id',width:120, title: '设备ID'},
          {field: 'kind',width:120, title: '报警类型',templet:function(d){
            alarm_kind_dict={'sos_alarm':'SOS报警','l_pres_low':'低压低报警','l_pres_heig':'低压高报警','h_pres_low':'高压低报警','f_pres_heig':'高压低报警',
                             'heart_low':'心率低报警','heart_high':'心率高报警','circle':'围栏报警','polygon':'围栏报警','rectangle':'围栏报警',
                             'fall_down':'摔倒报警','low_power':'低电量报警','stop_alarm':'滞留报警','speed_alarm':'超速报警','power_cut':'断电报警','polyline':'路线偏移报警'}
            return alarm_kind_dict[d.kind]
          }},
          {field: 'content',width:180, title: '报警参数'},
          {field: 'location', title: '报警地点',templet:function(d){
            var id_name=d.device_id+'alarm'+d.id.toString()
            var loca='<a id="'+id_name+'" class="layui-btn layui-btn-sm" onclick="alarm_location(\''+d.name+'\')">展示地址</a>'
            // console.log(alarm_addr_obj,id_name)
            if(alarm_addr_obj[id_name]){
              loca=alarm_addr_obj[id_name]
            }
            return loca
          }},
          {field: 's_time',width:350, title: '报警时间',templet:function(d){
            return '起：'+d.s_time+'，终：'+d.e_time
          }},
        ]],
        page: true
      });
}

function echarts_3(data) {
  console.log(data)
  var res=[]
  var time_order=['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23']
  for(var i=0;i<time_order.length;i++){
    var count=0
    if(data[time_order[i]]){
      count=data[time_order[i]]
    }
    res.push(count)
  }
    option = {  
        tooltip: {trigger: 'axis'},
        xAxis:  {type: 'category',boundaryGap: false,data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时','18时','19时','20时','21时','22时','23时']},
        yAxis: {type: 'value',},
        series: [
          {name:'报警次数',type:'line',data:res,markPoint: {data: [{type: 'max', name: '最大值'},{type: 'min', name: '最小值'}]},markLine: {data: [{type: 'average', name: '平均值'}]}},
        ]
    };
    var myChart = echarts.init(document.getElementById('echarts_3'));
    myChart.setOption(option);

}

//添加选择设备列表
fill_raido_func(device,'chose_device','user_name','device_id')
formSelects.render()  

// 时间选择框渲染
laydate.render({
  elem: '#s_time'
  ,type: 'datetime'
  ,value:new Date(new Date(new Date().toLocaleDateString()).getTime())
  ,btns: ['clear','now', 'confirm']
});

laydate.render({
  elem: '#e_time'
  ,type: 'datetime'
  ,value:new Date()
  ,btns: ['clear','now', 'confirm']
});

</script>